<!DOCTYPE html>
<style>
div {
  width: 100px;
  height: 100px;
  background: orange;
}
div::before {
  content: ":)";
  transition-property: transform;
  transition-duration: 1ms;

  /* Make the pseudo element "transformable" as per
   * https://www.w3.org/TR/css-transforms-1/#transformable-element.
   */
  display: block;
}
</style>
<div></div>
<span id="dummy"></span>
<script>
// Verify that a composited animation on a pseudoelement completes cleanly.
// This is a regression test for crbug.com/626571

if (window.testRunner)
  testRunner.waitUntilDone();

function waitForCompositor() {
  return dummy.animate({opacity: ['1', '1']}, 1).ready;
}

requestAnimationFrame(() => {
  document.styleSheets[0].addRule('div::before',  'transform: translateX(20px)');
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      waitForCompositor().then(() => {
        if (window.testRunner)
          testRunner.notifyDone();
      });
    });
  });
});
</script>
